<template>
  <div class="margin-l margin-r">
   <div class="clearfix padding-tb20">
     <div class="margin-l fl">
       <el-form class="form-container">
         <el-input v-model="queryParam.userId" clearable placeholder="用户ID" @keyup.enter.native="queryEnrollSign" style="width: 100px;"></el-input>
         <el-input v-model="queryParam.condition" clearable placeholder="姓名/手机号" @keyup.enter.native="queryEnrollSign" style="width: 150px;"></el-input>

         <el-button class="search" icon="el-icon-search" @click="queryEnrollSign">搜索</el-button>
         <el-button @click="handleDownload">导出Excel</el-button>
       </el-form>
     </div>
     <div class="fr padding-r20">
     <el-popover
       placement="bottom"
       width="200"
       trigger="hover">
       <div style="width:200px;height:200px;margin: 0 auto;">
         <p class="center">微信扫描签到</p>
         <div v-html="qrCode">
         </div>
       </div>
       <el-button class="c-fc-blue font-s14 family-PingFangSC-Regular" type="text" slot="reference">二维码签到</el-button>
     </el-popover>
     </div>
   </div>
    <div style="margin: 0 20px;">
      <el-tabs class="color-222 family-PingFangSC-Semibold" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all">
        </el-tab-pane>
        <el-tab-pane label="签到" name="sign">
        </el-tab-pane>
        <el-tab-pane label="待签到" name="noSign">
        </el-tab-pane>
      </el-tabs>
      <sign-table :permission="permission" @refreshSign='getSignData' :queryParam="queryParam" :signData="signData"></sign-table>
    </div>
  </div>
</template>
<script>
  import signTable from './components/signTable.vue'
  import { getActivityEnrollSigned, getQrCode } from '@/api/activities'
  import { interaction_activities } from '@/utils/permission'
  export default {
    components: {
      signTable
    },
    data() {
      return {
        permission: 3,
        qrCode: null,
        listLoading: false,
        queryParam: {
          state: -2,
          signed: -1,
          pageIndex: 0,
          total: 0,
          pageSize: 10,
          condition: '',
          activityId: 0,
          userId: ''
        },
        activeName: 'all', // 选中的tab页
        signData: [],
        filename: '签到表',
        sheetTitle: '签到表单',
        channel: 2,
        userId1: null,
        condition1: null,
        signed1: -1,
        token: '',
        URLAPI: process.env.BASE_API
      }
    },
    mounted() {
      this.queryParam.activityId = this.$route.params.activityId
      this.getSignData()
      this.qcode()
      this.getModelPermission()
    },
    watch: {
      // 监听路由名称变化 重新调用数据
      $route: function(to, from) {
        if (to.name == 'signManage') {
          this.queryParam.activityId = this.$route.params.activityId
          this.getSignData()
          this.qcode()
        }
      }
    },
    methods: {
      getModelPermission() {
        this.permission = interaction_activities()
      },
      qcode() {
        getQrCode(this.$route.params.activityId).then(res => {
          if (res.data.statusCode == 200) {
            this.qrCode = res.data.data
          }
        })
      },
      queryEnrollSign() {
        this.queryParam.state = -2
        this.activeName = 'all'
        this.getSignData()
      },
      handleClick(tab, event) {
        this.activeName = tab.name // 切换子主键的名称
        this.queryParam.condition = ''
        this.queryParam.pageIndex = 0
        this.getSignData()
      },
      getSignData() {
        if (this.activeName == 'all') {
          this.queryParam.signed = -1
          this.signed1 = -1
        } else if (this.activeName == 'sign') {
          this.queryParam.signed = 1
          this.signed1 = 1
        } else {
          this.queryParam.signed = 0
          this.signed1 = 0
        }
        this.listLoading = true
        console.log('签到传的参数', this.queryParam)
        getActivityEnrollSigned(this.queryParam).then(res => {
          console.log('签到', res)
          this.token = res['config']['headers']['Authorization'].split(' ')[1]
          this.signData = res.data.data.data
          this.queryParam.total = res.data.data.retTotal
          this.listLoading = false
        }).catch(err => {
          console.log(err)
        })
      },
      handleDownload() {
        if (this.signData.length == 0) {
          this.$message.warning('没有数据不能导出')
          return
        }
        if (this.queryParam.userId == '' || this.queryParam.userId == null) {
          this.userId1 = null
        } else {
          this.userId1 = this.queryParam.userId
        }
        if (this.queryParam.condition == null || this.queryParam.condition == '') {
          this.condition1 = null
        } else {
          this.condition1 = this.queryParam.condition
        }
        this.queryParam.state = this.signed1
        console.log('导出', this.URLAPI + '/excel/exportActivitiesEnroll/' + this.filename + '/' + this.sheetTitle + '/' + this.queryParam.activityId + '/' + this.queryParam.state + '/' + this.channel + '/' + this.userId1 + '/' + this.condition1 + '?token=' + this.token)

        window.open(this.URLAPI + '/excel/exportActivitiesEnroll/' + this.filename + '/' + this.sheetTitle + '/' + this.queryParam.activityId + '/' + this.queryParam.state + '/' + this.channel + '/' + this.userId1 + '/' + this.condition1 + '?token=' + this.token)
        this.queryParam.state = -2
      }
    }
  }
</script>

<style scoped>
  a:hover {
    color: #409EFF;
  }

</style>
